<template>
  <view class="container">
    <!-- 自定义顶部导航栏 -->
    <view class="custom-nav-bar nav-transparent">
      <!-- <text class="nav-bar-title">球场地图</text> -->
      <image src="../../static/tab/logo.png" mode="widthFix"
        class="nav-bar-image logo-image" />
      
      <!-- 登录状态指示器 -->
      <view v-if="false" class="login-status-indicator">
        <view v-if="loginStatus.loading" class="status-loading">
          <text class="status-text">登录中...</text>
        </view>
        <view v-else-if="loginStatus.isLoggedIn" class="status-success">
          <text class="status-text">已登录</text>
        </view>
        <view v-else class="status-failed" @click="retryLogin">
          <text class="status-text">未登录 (点击重试)</text>
        </view>
      </view>
    </view>
    
    <view @click.stop="routeToSearchCourtSearch" class="main-image-container">
      <image src="https://mp-0c81a8be-aa9a-4fae-8d6c-54b797768401.cdn.bspapp.com/static/分组 5@3x.png"
        mode="widthFix" class="nav-bar-image main-image" />
      <view @click.stop="routeToCitySelect" class="main-image-text-container">
        <text class="main-image-text">选择城市：{{ currentCity.name }}</text>
        <image src="../../static/home/下拉 (1).png" mode="widthFix" class="dropdown-icon" />
      </view>
    </view>

    <view class="bg-image-container">
      <image src="../../static/home/bg.png" mode="widthFix"
        class="nav-bar-image bg-image" />
    </view>
    <view class="sub-images-container">
      <view class="function-box">
        <text @click.stop="routeToSearchCourt" class="sum-box">球馆数量 <text class="sum-txt">{{ venueCount }}</text> </text>
      
      <image @click="routeToSearchCourt" src="https://mp-0c81a8be-aa9a-4fae-8d6c-54b797768401.cdn.bspapp.com/static/分组 6.png"
        mode="widthFix" class="nav-bar-image sub-image-left" />
      </view>
      <view  class="function-box">
      <image @click="routeToSearchCourt1" src="https://mp-0c81a8be-aa9a-4fae-8d6c-54b797768401.cdn.bspapp.com/static/分组 7.png"
        mode="widthFix" class="nav-bar-image sub-image-right" />
        <text @click.stop="routeToSearchCourt1" class="sum-box sum-box-1">发球馆数量 <text class="sum-txt">{{ smallVenueCount }}</text></text>
        </view>
      </view>
    <view class="section-header">
      <view class="section-title-left">
        <view class="section-title-bar"></view>
        <text class="section-title-text">球馆介绍</text>
      </view>
      <view class="section-title-right" @click="goToVenueList">
        <text class="section-more-text">查看全部</text>
        <image class="section-more-arrow" src="../../static/home/right.png" mode="widthFix" />
      </view>
    </view>
    <view>
      <!-- 横向滚动scroll-view -->
      <scroll-view scroll-x class="scroll-view-container">
        <view class="scroll-content">
          <view v-for="(venue, index) in venueList.slice(0, 5)" :key="index" class="venue-card" @click="goToMiniProgram(venue.appId)">
            <image :src="venue.images[0]" mode="aspectFill" class="venue-image" />
            <view class="venue-title">{{ venue.name }}</view>
            <view class="venue-desc">{{ venue.description }}</view>
          </view>
        </view>
      </scroll-view>
      <view class="section-header">
        <view class="section-title-left">
          <view class="section-title-bar"></view>
          <text class="section-title-text">推荐场地</text>
        </view>
        <view class="section-title-right">
          <text class="section-more-text" @click="routeToSearchCourt">查看全部</text>
          <image class="section-more-arrow" src="../../static/home/right.png" mode="widthFix" />
        </view>
      </view>
      <view class="recommended-venue">
          <view class="venue-header">
            <view class="venue-logo">
                向
              </view>
              <view class="venue-info">
                <view class="venue-name">{{ recommendedVenue.name }}</view>
                <view class="venue-details">
                  <view class="court-name">{{ recommendedVenue.courtName }}</view>
                  <view class="court-info-row">
                    <text class="info-label">场地类型</text>
                    <text class="court-type">{{ recommendedVenue.courtType }}</text>
                  </view>
                  <view class="venue-actions">
                    <view class="venue-location">
                      <image class="location-icon" src="../../static/home/导航.png" mode="widthFix" />
                      <text class="distance-text">距离：{{ recommendedVenue.distance }}</text>
                    </view>
                    <view class="book-button" @click="goToMiniProgram('wx080bd287ac7c0a2d')">
                        <image class="book-icon" src="../../static/home/Subtract.png" mode="widthFix" />
                          去订场
                    </view>
                  </view>
                </view>
              </view>
          </view>
        </view>
    </view>
  </view>
</template>

<script>
import venueConfig from '../../common/venueConfig.json';
import smallVenueConfig from '../../common/smallVenueConfig.json';
import { XiangYangCaiHongWanProcessor } from '../../common/venueProcessors/XiangYangCaiHongWanProcessor.js';
import LoginManager from '../../utils/login.js';
import { autoDetectAndSetCity, getCurrentCity, saveCurrentCity } from '../../common/cityUtils.js';

export default {
  data() {
    return {
      recommendedVenue: {
        name: '向阳彩鸿湾',
        courtName: '1号硬地风雨场',
        timeSlots: [],
        courtType: '硬地风雨场',
        distance: '2.5 km',
        loading: true
      },
      loginStatus: {
        isLoggedIn: false,
        userInfo: null,
        loading: false
      },
      // 添加与 mine.vue 相同的数据属性
      userInfo: null,
      openid: uni.getStorageSync('openid'),
      userInfoUpdateTimer: null, // 用户信息更新定时器
      isUserInfoLoading: false, // 用户信息加载状态
      loginStateListener: null, // 登录状态监听器
      // 城市相关数据
      currentCity: {
        name: '东莞市',
        key: 'dongguan'
      }
    };
  },
  computed: {
    // 根据当前城市过滤球馆列表
    venueList() {
      if (!venueConfig.venues || !this.currentCity) {
        return [];
      }
      
      return venueConfig.venues.filter(venue => {
        // 检查球馆的地址中是否有匹配当前城市的
        return venue.addresses && venue.addresses.some(address => 
          address.city === this.currentCity.name
        );
      });
    },
    // 计算大球馆数量（根据当前城市过滤）
    venueCount() {
      if (!venueConfig.venues || !this.currentCity) {
        return 0;
      }
      
      return venueConfig.venues.filter(venue => {
        // 检查球馆的地址中是否有匹配当前城市的
        return venue.addresses && venue.addresses.some(address => 
          address.city === this.currentCity.name
        );
      }).length;
    },
    // 计算小球馆数量（根据当前城市过滤）
    smallVenueCount() {
      if (!smallVenueConfig.venues || !this.currentCity) {
        return 0;
      }
      
      return smallVenueConfig.venues.filter(venue => {
        // 检查球馆的地址中是否有匹配当前城市的
        return venue.addresses && venue.addresses.some(address => 
          address.city === this.currentCity.name
        );
      }).length;
    }
  },
  async onLoad() {
    console.log('Home page onLoad');
    // 页面加载时获取用户信息
    this.updateUserInfoFromGlobalState();
    await this.fetchUserInfoFromDatabase();
    
    // 初始化城市信息
    await this.initializeCity();
    
    // 加载推荐场地
     this.loadRecommendedVenue();
   },
   onShow() {
     console.log('Home page onShow');
     
     // 从缓存中获取用户信息
     const cachedUserInfo = uni.getStorageSync('cachedUserInfo');
     if (cachedUserInfo) {
       this.userInfo = { ...this.userInfo, ...cachedUserInfo };
       console.log('从缓存获取用户信息:', this.userInfo);
       
       // 同时更新 loginStatus
       this.loginStatus.userInfo = this.userInfo;
       this.loginStatus.isLoggedIn = true;
     }
     
     // 更新城市信息（从存储中获取）
     this.updateCityFromStorage();
     
     // 监听用户信息更新事件
     uni.$off('updateUserInfo'); // 先移除之前的监听器，避免重复监听
     uni.$on('updateUserInfo', () => {
       console.log('接收到用户信息更新通知');
       // 从缓存中获取最新的用户信息
       const updatedUserInfo = uni.getStorageSync('cachedUserInfo');
       if (updatedUserInfo) {
         this.userInfo = { ...this.userInfo, ...updatedUserInfo };
         console.log('从缓存获取更新后的用户信息:', this.userInfo);
         
         // 同时更新 loginStatus
         this.loginStatus.userInfo = this.userInfo;
         this.loginStatus.isLoggedIn = true;
       }
     });
     },
     onUnload() {
       // 页面卸载时移除监听器
       if (this.loginStateListener) {
         // 如果有全局登录状态监听器，移除它
         // globalLoginState.removeListener(this.loginStateListener)
       }
       // 移除用户信息更新事件监听器
       uni.$off('updateUserInfo');
     },
  methods: {
    async autoLogin() {
      try {
        this.loginStatus.loading = true;
        console.log('开始自动登录...');
        
        // 调用登录管理器进行静默登录
        const loginResult = await LoginManager.checkLoginState();
        
        if (loginResult && loginResult.token) {
          this.loginStatus.isLoggedIn = true;
          this.loginStatus.userInfo = {
            token: loginResult.token,
            tokenExpired: loginResult.tokenExpired,
            openid: uni.getStorageSync('openid')
          };
          
          console.log('自动登录成功:', this.loginStatus.userInfo);
          
          // 可以在这里触发登录成功的回调或事件
          this.$emit('loginSuccess', this.loginStatus.userInfo);
          
        } else {
          console.log('自动登录失败，未获取到有效token');
          this.loginStatus.isLoggedIn = false;
        }
        
      } catch (error) {
        console.error('自动登录过程中发生错误:', error);
        this.loginStatus.isLoggedIn = false;
        
        // 显示用户友好的错误提示
        uni.showToast({
          title: '登录失败，请稍后重试',
          icon: 'none',
          duration: 2000
        });
        
      } finally {
        this.loginStatus.loading = false;
      }
    },
     
     async retryLogin() {
        console.log('用户手动触发重新登录');
        
        // 执行静默登录
        try {
          this.loginStatus.loading = true;
          const loginResult = await LoginManager.silentLogin();
          console.log("loginResult", loginResult);
          
          if (loginResult.token) {
            // 登录成功后更新用户信息
            this.updateUserInfoFromGlobalState();
            // 从数据库获取最新的用户信息
            await this.fetchUserInfoFromDatabase();
            uni.showToast({
              title: '登录成功',
              icon: 'success'
            });
            this.openid = uni.getStorageSync('openid');
          } else {
            throw new Error(loginResult.message || '登录失败');
          }
        } catch (error) {
          console.error('静默登录失败:', error);
          this.loginStatus.isLoggedIn = false;
          uni.showToast({
            title: '登录失败，请稍后重试',
            icon: 'none'
          });
        } finally {
          this.loginStatus.loading = false;
        }
      },
     
     // 防抖函数
     debounce(func, wait) {
       let timeout;
       return function executedFunction(...args) {
         const later = () => {
           clearTimeout(timeout);
           func(...args);
         };
         clearTimeout(timeout);
         timeout = setTimeout(later, wait);
       };
     },
     
     // 更新用户信息（从全局状态）
     updateUserInfoFromGlobalState() {
        try {
          // 使用防抖函数避免频繁更新
          const debouncedUpdate = this.debounce(() => {
            // 从本地存储获取用户信息
            const token = uni.getStorageSync('uni_id_token');
            const openid = uni.getStorageSync('openid');
            const cachedUserInfo = uni.getStorageSync('cachedUserInfo');
            
            console.log('本地存储信息:', { token, openid, cachedUserInfo });
            
            if (token && openid) {
              // 更新用户信息
              if (cachedUserInfo) {
                this.userInfo = { ...this.userInfo, ...cachedUserInfo };
                console.log('更新后的用户信息:', this.userInfo);
              }
              
              // 更新 openid
              this.openid = openid;
              
              // 更新登录状态
              this.loginStatus.isLoggedIn = true;
              this.loginStatus.userInfo = this.userInfo;
            } else {
              console.warn('本地存储中未找到登录信息');
              this.userInfo = null;
              this.openid = null;
              
              // 更新登录状态
              this.loginStatus.isLoggedIn = false;
              this.loginStatus.userInfo = null;
            }
          }, 300); // 300ms 防抖延迟
          
          debouncedUpdate();
        } catch (error) {
          console.error('更新用户信息失败:', error);
        }
      },
       
       // 从数据库获取用户信息
       async fetchUserInfoFromDatabase() {
         try {
           // 设置加载状态
           this.isUserInfoLoading = true;
           
           // 获取 openid
           const openid = uni.getStorageSync('openid');
           
           if (!openid) {
             console.warn('未找到 openid');
             this.isUserInfoLoading = false;
             return;
           }
           
           // 先尝试从缓存获取用户信息
           const cachedUserInfo = uni.getStorageSync('cachedUserInfo');
           if (cachedUserInfo) {
             this.userInfo = { ...this.userInfo, ...cachedUserInfo };
             console.log('从缓存获取用户信息:', this.userInfo);
           }
           
           // 调用云函数查询用户信息
           const res = await uni.request({
             url: 'https://fc-mp-0c81a8be-aa9a-4fae-8d6c-54b797768401.next.bspapp.com/cloudfunctions/queryUser',
             method: 'POST',
             header: {
               'content-type': 'application/json'
             },
             data: {
               openid: openid
             }
           });
           
           console.log('获取用户信息响应:', res);
           
           if (res.statusCode === 200 && res.data && res.data.code === 0 && res.data.data && res.data.data.length > 0) {
             // 更新用户信息
             const userData = res.data.data[0];
             console.log('用户数据:', userData);
             console.log('用户头像:', userData.avatar);
             this.userInfo = { ...this.userInfo, ...userData };
             console.log('更新后的用户信息:', this.userInfo);
             
             // 将用户信息存储到缓存
             uni.setStorageSync('cachedUserInfo', this.userInfo);
             console.log('用户信息已存储到缓存');
             
             // 同时更新 loginStatus
             this.loginStatus.userInfo = this.userInfo;
             this.loginStatus.isLoggedIn = true;
             
             this.isUserInfoLoading = false;
             return userData;
           } else {
             console.warn('未找到用户信息:', res.data?.message || '未知错误');
             this.isUserInfoLoading = false;
             return null;
           }
         } catch (error) {
           console.error('获取用户信息失败:', error);
           this.isUserInfoLoading = false;
           return null;
         }
       },
       
       async loadRecommendedVenue() {
      try {
        const processor = new XiangYangCaiHongWanProcessor();
        const today = new Date().toISOString().split('T')[0];
        const data = await processor.getVenueSettings({
          reserveDate: today
        });
        
        if (data && data.data) {
          const venues = processor.process(data, today);
          if (venues && venues.length > 0) {
            // 找到第一个有空闲时间的场地
            const availableVenue = venues.find(venue => venue.timeSlots && venue.timeSlots.length > 0);
            if (availableVenue) {
              this.recommendedVenue = {
                name: '向阳彩鸿湾',
                courtName: availableVenue.name,
                timeSlots: availableVenue.timeSlots.slice(0, 8), // 最多显示8个时间段
                courtType: this.getCourtType(availableVenue.name),
                distance: '2.5 km',
                loading: false
              };
            } else {
              this.recommendedVenue.loading = false;
              this.recommendedVenue.timeSlots = [];
            }
          } else {
            this.recommendedVenue.loading = false;
          }
        } else {
          this.recommendedVenue.loading = false;
        }
      } catch (error) {
        console.error('加载推荐场地失败:', error);
        this.recommendedVenue.loading = false;
      }
    },
    getCourtType(courtName) {
      if (courtName.includes('红土')) {
        return '红土风雨场';
      } else if (courtName.includes('硬地') || courtName.includes('风雨')) {
        return '硬地风雨场';
      } else {
        return '硬地风雨场';
      }
    },
    routeToSearchCourt(){
      uni.navigateTo({
        url: '/pages/searchCourt/index',
      })
    },
    routeToSearchCourtSearch(){
      uni.navigateTo({
        url: '/pages/searchCourt/index',
        success: function() {
          // 页面跳转成功后，通过事件总线或其他方式触发搜索模态框
          setTimeout(() => {
            uni.$emit('openSearchModal');
          }, 100);
        }
      })
    },
    routeToSearchCourt1(){
      uni.navigateTo({
        url: '/pages/searchSmallCourt/index',
      })
    },
    goToVenueList() {
      uni.navigateTo({
        url: '/pages/venue/list'
      });
    },
    goToMiniProgram(appId) {
      if (appId) {
        uni.navigateToMiniProgram({
          appId: appId,
          success: function(res) {
            console.log('跳转小程序成功');
          }
        });
      } else {
        uni.showToast({
          title: '该场馆暂不支持小程序跳转',
          icon: 'none'
        });
      }
    },
    routeToCitySelect() {
      uni.navigateTo({
        url: '/pages/changeCity/index',
      })
    },
    
    // 初始化城市信息
    async initializeCity() {
      try {
        console.log('开始初始化城市信息...');
        
        // 首先尝试从存储中获取已保存的城市
        // const savedCity = getCurrentCity();
        // if (savedCity) {
        //   this.currentCity = savedCity;
        //   console.log('使用已保存的城市:', savedCity);
        //   return;
        // }
        
        // 如果没有保存的城市，使用uni.getLocation获取用户位置
        await this.getUserLocationAndDetectCity();
      } catch (error) {
        console.error('初始化城市信息失败:', error);
        // 使用默认城市
        this.currentCity = {
          name: '东莞市',
          key: 'dongguan'
        };
      }
    },
    
    // 使用uni.getLocation获取用户位置并检测城市
    async getUserLocationAndDetectCity() {
      try {
        console.log('开始获取用户位置...');
        
        const location = await new Promise((resolve, reject) => {
          uni.getLocation({
            type: 'gcj02',
            success: (res) => {
              console.log('获取位置成功:', res);
              resolve({
                longitude: res.longitude,
                latitude: res.latitude
              });
            },
            fail: (err) => {
              console.error('获取位置失败:', err);
              reject(err);
            }
          });
        });
        
        // 使用获取到的位置检测城市
        const { detectCityByLocation } = require('@/common/cityUtils.js');
        const detectedCity = detectCityByLocation(location.longitude, location.latitude);
        
        if (detectedCity) {
          this.currentCity = detectedCity;
          // 保存检测到的城市
          const { saveCurrentCity } = require('@/common/cityUtils.js');
          saveCurrentCity(detectedCity);
          console.log('检测到城市:', detectedCity);
        } else {
          // 如果检测失败，使用默认城市
          this.currentCity = {
            name: '东莞市',
            key: 'dongguan'
          };
          console.log('城市检测失败，使用默认城市');
        }
      } catch (error) {
        console.error('获取位置或检测城市失败:', error);
        // 使用默认城市
        this.currentCity = {
          name: '东莞市',
          key: 'dongguan'
        };
      }
    },
    
    // 从存储中更新城市信息
    updateCityFromStorage() {
      try {
        const savedCity = getCurrentCity();
        if (savedCity && savedCity.name !== this.currentCity.name) {
          this.currentCity = savedCity;
          console.log('从存储更新城市信息:', savedCity);
        }
      } catch (error) {
        console.error('从存储更新城市信息失败:', error);
      }
    }
  }
};
</script>

<style lang="scss">
.container {
  position: relative;
}

// 导航栏样式
.custom-nav-bar {
  position: fixed;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  
  &.nav-transparent {
    background-color: transparent;
  }
}

// 登录状态指示器样式
.login-status-indicator {
  // position: absolute;
  top: 20rpx;
  right: 30rpx;
  
  .status-loading, .status-success, .status-failed {
    padding: 10rpx 20rpx;
    border-radius: 200rpx;
    
    .status-text {
      font-size: 22rpx;
      font-weight: 500;
    }
  }
  
  .status-loading {
    background-color: #fff;
    
    .status-text {
      color: #666;
    }
  }
  
  .status-success {
    background-color: #fff;
    
    .status-text {
      color: #42CF7F;
    }
  }
  
  .status-failed {
    background-color: #fff;
    
    .status-text {
      color: #ff6b6b;
    }
  }
}

.nav-bar-image {
  &.logo-image {
    width: 270rpx;
    height: 68rpx;
  }
  
  &.bg-image {
    width: 750rpx;
    height: 528rpx;
  }
  
  &.main-image {
    width: 686rpx;
    height: 382rpx;
    margin: 20rpx;
  }
  
  &.sub-image-left {
    width: 332rpx;
    height: 164rpx;
    margin-right: 13rpx;
  }
  
  &.sub-image-right {
    width: 332rpx;
    height: 164rpx;
    margin-left: 13rpx;
  }
}

.bg-image-container {
  position: absolute;
  z-index: -1;
  top: -200rpx;
}

.main-image-container {
  margin-top: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .main-image-text-container {
    position: absolute;
    top: 200rpx;
    left: 32px;
    display: flex;
    align-items: center;
    padding: 26rpx 100rpx 20rpx 0;
  }
  
  .main-image-text {
    font-size: 26rpx;
    color: #fff;
    margin-right: 10rpx;
  }
  
  .dropdown-icon {
    width: 24rpx;
    height: 24rpx;
  }
}

.sub-images-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10rpx;
  position: relative;
}

.sum-box {
 position: absolute;
 left: 27rpx;
  bottom: 36rpx;
  font-size: 26rpx;
  color: #1FA655;
}

.sum-box-1 {
   left: 34rpx !important;
  bottom: 36rpx !important;
  color: #CC6933 !important;
}

// 区块标题样式
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30rpx;
  margin-top: 50rpx;
}

.section-title-left {
  display: flex;
  align-items: center;
}

.section-title-bar {
  width: 8rpx;
  height: 32rpx;
  opacity: 1;
  border-radius: 20rpx;
  background: rgba(37, 184, 95, 1);
  margin-right: 10rpx;
}

.section-title-text {
  color: #333;
  font-size: 28rpx;
  font-weight: bold;
}

.section-title-right {
  display: flex;
  align-items: center;
}

.section-more-text {
  color: #999;
  margin-right: 10rpx;
  font-size: 28rpx;
}

.section-more-arrow {
  width: 24rpx;
  height: 24rpx;
}

// 滚动区域样式
.scroll-view-container {
  width: 720rpx;
  overflow-x: scroll;
  padding-left: 30rpx;
  display: flex;
}

.scroll-content {
  display: flex;
  width: fit-content;
}

.venue-card {
  width: 240rpx;
  opacity: 1;
  border-radius: 36rpx;
  background: #F7F7F7;
  margin-right: 30rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  
  .venue-image {
    width: 220rpx;
    height: 220rpx;
    opacity: 1;
    border-radius: 24rpx;
    margin-top: 10rpx;
  }
  
  .venue-title {
    font-size: 26rpx;
    color: #333;
    margin-top: 20rpx;
    padding: 0 20rpx;
    text-align: center;
  }
  
  .venue-desc {
    font-size: 22rpx;
    color: #999;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
  }
}

// 推荐场地样式
.recommended-venue {
  width: 750rpx;
  box-sizing: border-box;
  padding: 20rpx;
}

.venue-header {
  display: flex;
}

.venue-logo {
  width: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  height: 76rpx;
  opacity: 1;
  border-radius: 24rpx;
  margin-right: 20rpx;
  font-weight: bold;
  background: linear-gradient(180deg, #D6FF7D 0%, #42CF7F 100%);
}

.venue-info {
  flex: 1;
  
  .venue-name {
    font-size: 34rpx;
    color: #333;
    margin-bottom: 20rpx;
    font-weight: bold;
  }
  
  .venue-details {
    background: #F4F5F7;
    border-radius: 24rpx;
    padding: 30rpx;
    
    .court-name {
      color: #333;
      font-size: 30rpx;
      margin-bottom: 10rpx;
    }
    
    .court-info-row {
      display: flex;
      margin-bottom: 15rpx;
      
      .info-label {
        font-size: 24rpx;
        color: #999;
        line-height: 50rpx;
        margin-right: 20rpx;
      }
      
      .time-slots {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        
        .time-slot {
          width: fit-content;
          font-size: 23rpx;
          line-height: 50rpx;
          padding: 0 15rpx;
          border-radius: 100px;
          background: #fff;
          color: #666;
          margin-right: 10rpx;
          margin-bottom: 10rpx;
          
          &.loading-slot {
            color: #999;
            background: #f0f0f0;
          }
          
          &.no-slots {
            color: #999;
            background: #f5f5f5;
          }
        }
      }
      
      .court-type {
        font-size: 23rpx;
        line-height: 50rpx;
        padding: 0 20rpx;
        border-radius: 100px;
        background: #fff;
        color: #666;
        margin-right: 20rpx;
      }
    }
    
    .venue-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .venue-location {
        display: flex;
        align-items: center;
        
        .location-icon {
          width: 42rpx;
          height: 42rpx;
          margin-right: 20rpx;
        }
        
        .distance-text {
          font-size: 24rpx;
          color: #666;
        }
      }
      
      .book-button {
        display: flex;
        width: 163rpx;
        height: 56rpx;
        opacity: 1;
        border-radius: 448px;
        background: #42CF7F;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        color: #fff;
        
        .book-icon {
          width: 24rpx;
          height: 24rpx;
          margin-right: 20rpx;
        }
      }
    }
  }
}
.function-box{
  position: relative;
}
.sum-txt{
  margin-left: 10rpx;
  font-weight: 700;
}
</style>